<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>喂养详情</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<link
    rel="stylesheet"
    href="https://unpkg.com/vant@2.12/lib/index.css"
/>

<style>
    body{
        background: #f7f8fa;
    }
    .van-doc-demo-block__title {
        margin: 0;
        padding: 32px 16px 16px;
        color: rgba(69, 90, 100, 0.6);
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
    }
    .van-cell__label {
        margin-top: 4px;
        color: #969799;
        font-size: 14px;
        line-height: 18px;
    }
</style>
<body>
 <div id="app">
     <h2 class="van-doc-demo-block__title">订单信息</h2>
     <van-cell-group >
         <van-cell title="订单ID"  label="{{$id}}" />
     </van-cell-group>
     <van-cell-group >
         <van-cell title="服务专员"  label="{{$personnel}}" />
     </van-cell-group>
     <van-cell-group >
         <van-cell title="服务对象"  label="{{$pets_name}}" />
     </van-cell-group>
     <van-cell-group >
         <van-cell title="上门时间" l >
             <template #label>
                 <van-button type="primary" @click="showCalendar=true" icon="todo-list-o" color="#FFA935"  size="mini">  查看日期</van-button>
             </template>
         </van-cell>
     </van-cell-group>
     <van-calendar  v-model:show="showCalendar" title="选中日期" :default-date="start_date"  :readonly="true" :show-confirm="false" type="multiple" ></van-calendar>
     <van-cell-group >
         <van-cell title="服务地址" label="{{$service_address}}{{$service_address_desc}}" />
     </van-cell-group>
     <van-cell-group >
         <van-cell title="入户交接" label="{{$handover}} {{$handover_other}}" />
     </van-cell-group>
     <h2 class="van-doc-demo-block__title">服务项目</h2>
     @foreach($service_projects as $k=>$v)
         <van-cell-group >
             <van-cell title="{{$v['title']}}"  label="{{$v['desc']}}" />
         </van-cell-group>
     @endforeach

     <h2 class="van-doc-demo-block__title">其他需求</h2>
     @foreach($service_project_needs as $k=>$v)
         <van-cell-group >
             <van-cell title="{{$v['explain']}}"  >
                 <template #right-icon>
                     <van-image
                         @click="imgClick('{{$v['image']}}')"
                         width="100"
                         height="100"
                         src="{{$v['image']}}"
                     />
                 </template>
             </van-cell>
         </van-cell-group>
     @endforeach
     <van-popup v-model="show">内容</van-popup>
 </div>
</body>
{{--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>--}}

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<script>
        // $('.card-item-img').click(function () {
        //     $('.alert').css('display','flex');
        //     let src=$(this).attr('data');
        //     $('.alert-html').append('<img src="'+src+'" style="width: auto;height: 400px" />')
        // })
        //
        // $('.alert-close').click(function () {
        //     $('.alert').css('display','none');
        //     $('.alert-html').empty();
        // })

        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#app',
            data:{
              curImage:"",
                show:false,
                showCalendar:false,
                start_date:[]
            },
            mounted(){
                let data=<?echo json_encode($start_date,true);?>;
                let newDate=[];
                for(let i in data){
                    newDate.push(new Date(data[i]));
                }
                this.start_date=newDate;
                console.log( this.start_date);
            },

            methods:{
                imgClick:function (e) {
                    console.log(e);
                }
            }
        });

        // 调用函数组件，弹出一个 Toast
        // vant.Toast('提示');

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);
        Vue.use(vant);
        console.log(123);
</script>
</html>
